
<template>
  <div id="main" class="content-box">
    <div class="statistics">
      <iframe
          id="bdIframe"
          ref="myIframe"
          :src="iframeUrl"
          width='88%'
          height='auto'
          style="border: none;"
          allowtransparency
      ></iframe>
    </div>
  </div>
</template>
<script>
import {userInfo, isLogin, getAgileBoard} from "@/assets/js/api"

export default {
  components: {

  },
  data() {
    return {
      iframeUrl: '',
      userName: '暂未登录'
    }
  },
  computed: {

  },
  created() {
    this.iframeData()
    this.checkLogin()
  },
  mounted() {
    this.iframeStyle()
    // this.getUserInfo()
    window.addEventListener('resize', ()=>{
      console.log(1)
      this.iframeStyle()
    })
  },
  methods: {
    checkLogin(){
      isLogin()
          .then((res) => {
            console.log(res)
            if (res.code == 0) {
              this.$nextTick(() =>{
                this.getAgileBoard()
              })
            }
          })
          .catch(() => {
            this.login();
          });
    },
    iframeStyle(){
      const oIframe = document.getElementById('bdIframe');
      const deviceWidth = document.documentElement.clientWidth;
      const deviceHeight = document.documentElement.clientHeight;
      oIframe.style.width = ((Number(deviceWidth)-220)*0.96) + 'px'; //数字是页面布局宽度差值
      oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差
    },
    iframeData(){
      // you will need to install via 'npm install jsonwebtoken' or in your package.json
      let jwt = require("jsonwebtoken");
      let METABASE_SITE_URL = "http://metabase.data.kaishujia.com";
      let METABASE_SECRET_KEY = "4ecbc00c7318aa248e9dfeffeb80d4f3a6e256e8f275f3e07b8f9e99f1d14bb1";
      let payload = {
        resource: { dashboard: 49 },
        params: {},
        exp: Math.round(Date.now() / 1000) + (10 * 60) // 10 minute expiration
      };
      let token = jwt.sign(payload, METABASE_SECRET_KEY);
      this.iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true";
    },
    logout() {
      window.location.href = "/ks-data-support/logout";
    },
    getUserInfo(){
      userInfo().then(res=>{
        if(res.code==0){
          this.userName = res.user.realName;
        }
      })
    },
    getAgileBoard(){
      getAgileBoard().then(res=>{
        console.log(res)
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.statistics {
  width: 100%;
  padding-top: 8px;
  box-sizing: border-box;
  background: #fff;
  .headerBar {
    height: 52px;
    line-height: 52px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #181818;
    border-bottom: 1px solid #eee;
    background: #fff;
    span {
      margin-left: 20px;
    }
  }
}
.tip {
  color: #666;
  font-size: 12px;
}
</style>
